<template>
  <div class="banner">
    <div @click="showSwiper()">
      <div class="banner-img">
        <img src="http://img1.qunarzz.com/sight/p0/1411/b6/662fc49d1d26a5a7775cf6b7f8b4ecec.water.jpg" alt="">
		</div>
        <div class="banner_title">
          杭州野生动物世界(AAAA景区)
        </div>
      </div>
      <div class="img_swiper" v-show="imgSwiper" @click="hideSwiper()">
        <swiper :options="swiperOption">
          <swiper-slide v-for="item in photoList" :key="item.id"><img :src="item.imgUrl"></swiper-slide>
        </swiper>
        <div class="swiper-pagination" slot="pagination"></div>
      </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      imgSwiper: false,
      photoList: [{
          id: "1",
          imgUrl: "http://img1.qunarzz.com/sight/p0/1411/b6/662fc49d1d26a5a7775cf6b7f8b4ecec.water.jpg_r_800x800_9991406f.jpg"
        },
        {
          id: "2",
          imgUrl: "http://img1.qunarzz.com/sight/p0/1411/b6/662fc49d1d26a5a7775cf6b7f8b4ecec.water.jpg_r_800x800_9991406f.jpg"
        },
        {
          id: "3",
          imgUrl: "http://img1.qunarzz.com/sight/p0/1411/b6/662fc49d1d26a5a7775cf6b7f8b4ecec.water.jpg_r_800x800_9991406f.jpg"
        }
      ],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        },
        loop: true,
      }
    }
  },
  methods: {
    showSwiper() {
      this.imgSwiper = true;
    },
    hideSwiper() {
      this.imgSwiper = false;
    }
  }
}

</script>
<style scoped="" lang="scss">
.banner {
  position: relative;

  .banner-img {
    width: 100%;
    overflow: hidden;
    height: 0px;
    padding-bottom: 55%;

    img {
      width: 100%;
    }

  }

  .banner_title {
    position: absolute;
    left: 0.3rem;
    bottom: 0.4rem;
    font-size: 0.36rem;
    color: #fff;
  }

}

.img_swiper {
  background: #000;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 100%;
  }
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
  color: #fff;
  bottom: 0.6rem;
  font-size: 0.26rem;
}

</style>
